<template>
  <div class="common-layout">
    <el-container>
      <el-header class="common-header">
        <AllHead></AllHead>
      </el-header>
      <el-container>
        <el-aside>
          <div class="userHead">
            <div class="otherUserImg">
              <el-image :src="userMessage.avatarUrl" class="userImg"></el-image>
              <el-button type="primary" class="point" size="small">关注</el-button>
            </div>
            <input type="file" id="userimg" @change="changeImg($event)">
            <h2>{{ userMessage.nickname }}</h2>
            <p class="MySig">{{ userDetailMessage.bio }}</p>
            <p class="MyFollowAndFans">关注:{{ userDetailMessage.followCount }}    粉丝:{{ userDetailMessage.fansCount }}</p>

            
          </div>
          <div class="userNav">
            <ul>
              <li><router-link active-class="active" :to="{ name: 'otherrecipe',query: $route.query}">他的食谱</router-link></li>
              <li><router-link active-class="active" :to="{ name: 'otherfocus' ,query: $route.query}">他的关注</router-link></li>
              <li><router-link active-class="active" :to="{ name: 'othercollect' ,query: $route.query}">他的收藏</router-link></li>
            </ul>
          </div>
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import AllHead from './AllHead.vue';
import axios from 'axios';
import { ref, toRefs, reactive, useId } from 'vue';
import { useRoute } from 'vue-router';
let route = useRoute()
let { query } = toRefs(route)//解构出query方法，直接使用
let userId = ref(query.value.au)//通过路由query传值得到主页的所点击的id
// console.log(userId)

let imgSrc = ref()
function changeImg(e: any) {
  const fd1 = new FormData()
  fd1.append('img', e.target.files[0])
  axios({
    url: 'https://hmajax.itheima.net/api/uploadimg',
    method: 'post',
    data: fd1
  }).then(res => {
    imgSrc.value = res.data.data.url
  })
}
interface userDetailMe{
  avatarUrl:string
  bio:string
  createTime:string
  email:string
  fansCount:number
  followCount:number
  gender:string
  id:number
  isAdmin:string
  nickName:string
  phoneNum:string
  recipeCount:number
  status:string
}
let userDetailMessage:userDetailMe = reactive({
  avatarUrl:'',
  bio:'',
  createTime:'',
  email:'',
  fansCount:0,
  followCount:0,
  gender:'',
  id:0,
  isAdmin:'',
  nickName:'',
  phoneNum:'',
  recipeCount:0,
  status:''


})
axios({
  url: '/api/user/getDetailUserInfo',
  params:{
    userId:userId.value
  }
}).then(res => {
  Object.assign(userDetailMessage, res.data.data)
  console.log(userDetailMessage);
})














interface userMe {
  id: number
  nickname: string
  avatarUrl: string
  isAdmin: number
}

let userMessage: userMe = reactive({
  id: 0,
  nickname: '加载中',
  avatarUrl: '',
  isAdmin: 0
})
axios({
  url: '/api/user/getPartUserInfo',
  params: {
    userId: userId.value
  }
}).then(res => {
  Object.assign(userMessage, res.data.data)
})
</script>

<style scoped>
.MyFollowAndFans{
  font-size: 0.8vw;
  color: #999;

}
.otherUserImg{
  position: relative;
}
.point{
  position: absolute;
  top: 120px;
  right: 127px;
}
.MySig {
  font-size: 1vw;
  color: #999;
}

.common-layout {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.common-header {
  height: 10vh;
  background-color: rgb(190, 231, 214);

  display: flex;
  justify-content: center;
  align-items: center;
}

.el-container {
  flex: 1;
  display: flex;
}

.el-aside {
  border-right: 1px solid rgba(0, 0, 0, 0.2);
}

.el-main {
  padding: 20px;
}

#userimg {
  display: none;
}

.userHead {
  text-align: center;
}

.userNav {
  text-align: center;
}

.userImg {
  width: 150px;
  height: 150px;
  border-radius: 100px;
}

.userNav a {
  display: inline-block;
  height: 5vh;
  width: 15vw;
  line-height: 5vh;
  color: black;
  text-decoration: none;
  border-radius: 50px;
}

.userNav a:hover {
  background-color: rgba(0, 0, 0, 0.05);
  /* color: yellowgreen; */
}
.active{
  background-color: rgba(0, 0, 0, 0.05);
}
</style>